@extends('web.layout')

@section('styles')
<style>
  .grid-union{
    padding: 5px;
    line-height: 70px;
    text-align: left;
    background-color: #fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .imgIcon{
    float: left;
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin: 10px 10px 0 0;
    background-color: #EEF3FA;
    color: #2c88ff;
    font-size: 20px;
    border-radius: 100px;
    border: 1px solid #b6d6ff;
    text-align: center;
  }
  .layui-col-md2 {
    width: 20%;
  }
  .layui-col-space5>* {
    padding: 5px;
  }
</style>
@endsection

@section('content')
  <div class="layui-container fly-marginTop">
    <p align="center" style="font-size:15px;color:red">
      大V认证标准：1、QQ采集群（千人大群）20个以上；2、微信采集群（大于400人）5个以上； 3、买家收益大于30万； 4、代理收益大于50万
    </p>
    <p align="center" style="font-size:15px;color:red">以上4点，满足其中任意一点即可联系客服认证</p>
    <p>&nbsp;</p>
    <div class="layui-row layui-col-space5">
      @foreach ($list as $k => $v)
      <div class="layui-col-md2">
        <div class="grid-union tips-union-desc union_id_{{ $v->id }}" data-id="{{ $v->id }}" data-union_desc="{{ $v->union_desc }}">
          <div class="imgIcon">{{ mb_substr($v->union_name,0,1) }}</div>
          <span>{{ $v->union_name }}</span>
          @if ($v->is_union_auth == 2)
          <i class="iconfont icon-renzheng" title="联盟认证"></i>
          @endif
        </div>
      </div>
      @endforeach
    </div>
  </div>
@endsection

@section('scripts')
  <script>
    layui.use(['layer'], function(){
      var $ = layui.$
              ,layer = layui.layer

      $('.tips-union-desc').on('mouseenter',function(obj){
        var id = $(this).data('id');
        var union_desc = $(this).data('union_desc');
        layer.tips(union_desc, '.union_id_'+id, {
          tips: [1, '#0FA6D8'],
          area: ['260px', 'auto'],
        });
      });

    });
  </script>
@endsection